<template>
  <div id="targetDetail">
    <div class="homeTitle">{{$route.query.title}}指标关注详情</div>
    <div class="tablebox" v-for="(ele, k) in allTable" :key="k">
       <div class="tabletitle">
          <el-checkbox v-model="ele.allChoose" @change="allchoose(k)">{{ele.city}}</el-checkbox>
       </div>
       <table>
         <tr>
           <td>关注</td>
           <td>行社\机构</td>
           <td>监管要求值 (%)</td>
           <td><span>*</span>严重级别关注值(含填写值) (%)</td>
           <td><span>*</span>中等级别关注值(含填写值) (%)</td>
           <td><span>*</span>普通级别关注值(含填写值) (%)</td>
         </tr>
         <tr v-for="(item, index) in ele.list" :key="index">
           <td><el-checkbox v-model="item.checked" @change="singleCheck(item, index, k)"></el-checkbox></td>
           <td>{{item.bName}}</td>
           <td><el-input v-model="item.restrictValue" placeholder="请输入" :disabled="true" type="number"></el-input></td>
           <td><el-input v-model="item.severityValue" placeholder="请输入" :disabled="!item.checked" type="number"></el-input></td>
           <td><el-input v-model="item.mediumValue" placeholder="请输入" :disabled="!item.checked" type="number"></el-input></td>
           <td><el-input v-model="item.commonValue" placeholder="请输入" :disabled="!item.checked" type="number"></el-input></td>
         </tr>
       </table> 
    </div>
    <div class="btnbox">
      <div class="btn1">
        <el-button type="primary" size="mini" @click="quanxuan">全选</el-button>
        <el-button type="primary" size="mini" @click="quanbuxuan">全不选</el-button>
        <el-button type="primary" size="mini" @click="plyz">批量设置严重级别值</el-button>
        <el-button type="primary" size="mini" @click="plzd">批量设置中等级别值</el-button>
        <el-button type="primary" size="mini" @click="plpt">批量设置普通级别值</el-button>
      </div>
      <div class="btn2">
        <el-button type="primary" size="mini" @click="wancheng">完成</el-button>
        <el-button type="primary" size="mini" @click="close">关闭</el-button>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "targetDetail",
  data() {
    return {
      checked: false,
      input: '',
      allTable:[],
    };
  },
  mounted() {
    this.getdata();
  },
  methods: {
    getdata () {
      this.axios.get('userAttention/findAttentionById',{params: {siId: this.$route.query.id}})
        .then(({data}) => {
          if (data.code == 200) {
            // this.allTable = data.data;
            let dataVal = data.data
            dataVal.forEach((item, index)=> {
              item.allChoose = false;
              item.list.forEach((ele,i)=> {
                ele.state == 1 ? ele.checked = true : ele.checked = false;
              })
            })
            let dataStr = JSON.stringify(dataVal);
            let dataArr = JSON.parse(dataStr);
            this.allTable = dataArr;
          }
        })
        .catch(function (error) {
          console.log(error);
        }); 
    },
    wancheng () {
      let status = true;
      this.allTable.forEach((item, index)=>{
        item.list.forEach((ele, i)=> {
          if (ele.checked == true) {
            if (ele.commonValue && ele.mediumValue && ele.severityValue) {
              status = true;
            } else {
              status = false;
            }
          }
        })
      })
      if (!status) {
        this.$message({message: '请您填写完整关注的表格',type: 'warning'});
        return false;
      }
      let arr =[]
        this.allTable.forEach((item, index)=>{
          item.list.forEach((ele, i)=> {
            if (ele.checked) {
              arr.push({severityValue: ele.severityValue, commonValue: ele.commonValue, restrictValue: ele.restrictValue, 
              id: ele.bivId, mediumValue: ele.mediumValue})
            }
          })
        })
        this.axios.post('userAttention/addAttentionValue',{siId: this.$route.query.id-0,  json: arr})
        .then(({data}) => {
          if (data.code == 200) {
            this.$message({message: '提交成功',type: 'success'});
            this.$router.go(-1);
          }
        })
        .catch(function (error) {
          console.log(error);
        });  
    },
    close () {
      this.$router.go(-1);
    },
    singleCheck (item, index,k) {
      let allTrue = this.allTable[k].list.every(item=> {
        return item.checked == true;
      })
      this.allTable[k].allChoose = allTrue;
    },
    allchoose (k) {
      this.allTable[k].list.forEach(item => {
         item.checked = this.allTable[k].allChoose;
      })
    },
    quanxuan () {
      this.allTable.forEach(ele=> {
        ele.allChoose = true;
        ele.list.forEach(item=>{
          item.checked = true;
        })
      })
    },
    quanbuxuan () {
      this.allTable.forEach(ele=> {
        ele.allChoose = false;
        ele.list.forEach(item=>{
          item.checked = false;
        })
      })
    },
    isChoose () {
      let isChoosed = false;
      this.allTable.forEach((item, index)=>{
        item.list.forEach((ele, i)=> {
          if (ele.checked) {
            isChoosed = true;
          }
        })
      })
      return isChoosed;
    },
    plyz () {
      if (!this.isChoose()) {
        this.$message({message: '请您至少选中一个关注',type: 'warning'});
        return false
      }
      this.$prompt('请输入批量设置严重级别值', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputErrorMessage: '不能为空'
        }).then(({ value }) => {
          this.allTable.forEach(ele=> {
            ele.list.forEach(item=>{
              if (item.checked) {
                item.severityValue = value;
              }              
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },
    plzd () {
       if (!this.isChoose()) {
        this.$message({message: '请您至少选中一个关注',type: 'warning'});
        return false
      }
      this.$prompt('请输入批量设置中等级别值', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputErrorMessage: '不能为空'
        }).then(({ value }) => {
          this.allTable.forEach(ele=> {
            ele.list.forEach(item=>{
              if (item.checked) {
                item.mediumValue = value;
              }              
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    },
    plpt () {
       if (!this.isChoose()) {
        this.$message({message: '请您至少选中一个关注',type: 'warning'});
        return false
      }
      this.$prompt('请输入批量设置普通级别值', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          inputPattern: /\S/,
          inputErrorMessage: '不能为空'
        }).then(({ value }) => {
          this.allTable.forEach(ele=> {
            ele.list.forEach(item=>{
              if (item.checked) {
                item.commonValue = value;
              }              
            })
          })
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '取消输入'
          });       
        });
    }
  }
};
</script>

<style lang="scss">
#targetDetail {
  .tablebox {
    padding: 20px;    
    background-color: white;
    .tabletitle {
      height: 50px;
      padding: 0 20px;
      background-color: white;
      display: flex;
      align-items: center;
    }
    table {
      width: 100%;
      border: 1px solid #cccccc;
      border-collapse: collapse;
      tr {
        td {
          padding: 5px 10px;
          border-right: 1px solid #cccccc;
          border-bottom: 1px solid #cccccc;
          text-align: center;
          span {
            color: red;
          }
        }
      }
    }
  }
  .btnbox {
    background: white;
    >div {
      height: 50px;
      padding: 0 20px;
      display: flex;
      align-items: center;
      &.btn2 {
        justify-content: center;
      }
    }
  }
}
</style>
